<template>
  <v-card class="mx-auto" v-ripple>
    <v-card-text>
      <div class="ellipsis">
        <span>{{category.name}}</span>
      </div>

      <div class="icon-wrapper">
        <v-icon>
          iconfont-icon iconxiangyou1
        </v-icon>
      </div>

    </v-card-text>
  </v-card>

</template>

<script>
    /**
     * 物料卡
     * @author Canaan
     * @date 2019/8/13 15:41.
     */
    export default {
        name: '',
        mounted() {

        },
        components: {},
        props: {
            category: {
                type: Object,
                default() {
                    return {
                        id: null,
                        name: "类别"
                    }
                }
            }
        },
        data() {
            return {}
        },
        computed: {},
        methods: {},
        watch: {},
        filters: {},
        beforeDestroy() {

        }
    }

</script>

<style scoped>
  .v-card {
    background-color: #fff !important;
    box-shadow: 0px 0px 2px #ddd !important;
  }

  .ellipsis {
    margin: 0 auto;
    /* padding: 20px; */
    font-size: 20px;
    font-weight: 700;
    /* width: 150px; */
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #ff9859;
    border-radius: 5px;

    /* box-shadow: 5px 5px 10px #999; */
    /*color: #48a2f6;*/
    /*background: #c9e1f7;*/
    /* transform:scaleY(40deg); */
    /* transform:rotateY(40deg); */

    /* transform:skewY(10deg); */
    /* transform:rotate(7deg); */
  }

  .v-card__text {
    padding: 0;
  }

  /* .gradient {
    background-image: linear-gradient(90deg, #f7f7f0 0%, #d7dbd9 100%),
      linear-gradient(#6d40ff, #6d40ff);
  } */

  .pdtb-10 {
    padding: 10px 0;
  }

  .v-icon {
    color: #fff;
    font-size: 14px;
  }

  .v-card {
    padding: 38px 30px;
  }

  .icon-wrapper {
    width: 40px;
    background: #ff9859;
    text-align: center;
    border-radius: 20px;
    margin: 10px auto 0;

  }

</style>
